<template>
    <el-dialog
        :title="title"
        :visible.sync="show"
        @close="close"
        @open="_open"
        append-to-body
        destroy-on-close
        width="40%">
        <video ref="videoPlay" class="preview-video" style="max-width: 100%" controls name="media" v-if="type === 'video'">
            <source :src="sourceUrl" type="video/mp4">
        </video>
        <audio ref="videoPlay" class="preview-video" v-else-if="type === 'radio'" :src="sourceUrl" controls="controls"></audio>
        <img :src="sourceUrl" v-else-if="type === 'img'" alt="">
    </el-dialog>
</template>
<script lang="ts">

import { Component, Vue } from "vue-property-decorator";

@Component
export default class AuditComponent extends Vue {
    show = false
    title = ""
    sourceUrl = ""
    type = "video"

    _open() {
        const nameArr = this.sourceUrl.split('.');
        const suffix = nameArr[nameArr.length - 1].toLocaleLowerCase();
        const videoList = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
        const radioList = ["wmv", "act", "rec", "vy1", "vy2", "vy3", "vy4", "sc4", "dvf", "msc", "wma", "mp3", "wav", "aiff", "ava", "m4a"];
        const imgList = ["bmp", "jpg", "jpeg", "png", "gif"];
        if (videoList.includes(suffix)) {
            this.type = "video";
            this.$nextTick(() => {
                (this.$refs.videoPlay as any).load();
            });
        } else if (radioList.includes(suffix)) {
            this.type = "radio";
            this.$nextTick(() => {
                (this.$refs.videoPlay as any).load();
            });
        } else if (imgList.includes(suffix)) {
            this.type = "img";
        } else {
            this.close();
            window.open(this.sourceUrl);
        }

        this.title = this.title || "查看";
        this.$emit("onopen");
    }

    _close() {
        this.$emit("onclose");
    }

    _afterClose() {
        this.$nextTick(function() {
            this.$emit("onafterclose");
            this.$el.remove && this.$el.remove();
        });
    }

    close() {
        this.show = false;
    }
}
</script>
